<!DOCTYPE html>
<html>
<head>
    <title>消息提示弹窗</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../../themes/bootstrap/cetc54.ui.all.css">

</head>
<body>

<button type="button" class="button" onclick="showMsg('left','top');">左上</button>
<button type="button" class="button" onclick="showMsg('center','top');">中上</button>
<button type="button" class="button" onclick="showMsg('right','top');">右上</button>

<button type="button" class="button" onclick="showMsg('left','center');">左中</button>
<button type="button" class="button" onclick="showMsg('center','center');">中中</button>
<button type="button" class="button" onclick="showMsg('right','center');">右中</button>

<button type="button" class="button" onclick="showMsg('left','bottom');">左下</button>
<button type="button" class="button" onclick="showMsg('center','bottom');">中下</button>
<button type="button" class="button" onclick="showMsg('right','bottom');">右下</button>
<p>回调次数:<span style="font-weight: bold;color: red;" id="div">0</span></p>
<p>asddf</p><p>asddf</p><p>asddf</p><p>asddf</p><p>asddf</p><p>asddf</p><p>asddf</p><p>asddf</p><p>asddf</p><p>asddf</p>
<p>asddf</p><p>
</body>
<script type="text/javascript" src="../../lib/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../../release/cetc54.ui.all.js"></script>
<script>
    alert($(document.body).height());
    function showMsg(horizontal,vertical) {
        $.uiMessagetip.show({
            animate:true,
            title: '消息提醒',
            content: '您有1条短信息，请注意查收！',
            vertical:vertical,
            horizontal:horizontal,
            timeout:2000,
            onClose: function () {
                var count=$('#div');
                count.text(parseInt(count.text())+1);
            }
        });
    }
</script>
</html>